<!--
  + 刷新页面得时候 renderedOn: server
  + 点击refresh按钮时 renderedOn: client
  + generate 时候输出为 Created at: Tue Mar 23 2021 22:34:31 GMT+0800 (GMT+08:00) server
  + generate 后通过service 启动dist 访问此页面根本不会输出asyncData内容，只有在refresh后，在client模式下才会输出
  ===================
    1、asyncData 中设置renderedOn =  new Date()
    2、generate 时 renderedOn = 2021 22:53:39
    3、service 启动dist 访问此页面 renderedOn === 2021 22:53:39
    得出结论
      generate 时 asyncData 才会运行，在客户端不管第一次还是刷新网页，都不会在执行asyncData，除非主动进行 this.$nuxt.refresh()
  ===================
 -->
<template>
  <div>
    <h1>I am rendered on the {{ renderedOn }} side</h1>
    <button @click="refresh">
      Refresh
    </button>
  </div>
</template>

<script>
export default {
  asyncData () {
    let renderedOn = process.client ? 'client' : 'server'
    renderedOn += 'Created at: ' + new Date()
    // eslint-disable-next-line no-console
    console.log('Created at: ' + new Date(), renderedOn)
    return { renderedOn }
  },
  data () {
    return {
      renderedOn: ''
    }
  },
  methods: {
    refresh () {
      this.$nuxt.refresh()
    }
  }
}
</script>
